<template>
  <el-card :body-style="{ padding: '0px' }">
    <div class="carditem">
      <img class="headImg" :src="this.$store.state.festivalListData.namePicture" />
      <div class="content">
        <p class="p1">{{ this.$store.state.festivalListData.titleDesc }}</p>
        <img class="url1" :src="this.$store.state.festivalListData.titlePicture" />
      </div>
      <div class="content">
        <h3>来历：</h3>
        <p class="p2">{{ this.$store.state.festivalListData.originDesc }}</p>
        <img class="url1" :src="this.$store.state.festivalListData.originPicture" />
      </div>
      <div class="content">
        <h3>传说：</h3>
        <p class="p3">{{ this.$store.state.festivalListData.legendDesc }}</p>
        <img class="url1" :src="this.$store.state.festivalListData.legendPicture" />
      </div>
    </div>
    <div class="revert">
      <el-button-group>
        <el-button class="revertbtn" type="primary" icon="el-icon-arrow-left" @click="Change()" round>
          返回节日列表
        </el-button>
        <el-button :plain="true" class="revertbtn" type="primary" @click="NextContent()" round>
          下一个节日
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-button-group>
    </div>
  </el-card>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      viewname: "FestivalList",
    };
  },
  methods: {
    Change() {
      this.$store.commit("Change", { id: 0, name: this.viewname });
    },
    NextContent() {
      var num = 0;
      var currentId = this.$store.state.festivalListData.id;
      this.$store.state.festivalListDatas.forEach(function (item, index) {
        if (item.id === currentId) {
          num = index + 1;
        }
      })
      if (num >= this.$store.state.festivalListDatas.length) {
        this.$message({
          message: "Sorry,已经没有下一个节日了哦",
          type: "error",
        });
      } else {

        this.$store.commit("Change", { id: this.$store.state.festivalListDatas[num].id, name: "FestivalContent" });
      }
    },
  },
};
</script>

<style scoped>
.el-card.is-always-shadow {
  border: 0px;
  box-shadow: 0 0 0 0;
  background-color: rgb(254, 246, 231);
  transition: all 0.5s;
  border: 1px solid #ffe0b4;
  border-top: 0px;
}

.carditem {
  display: flex;
  width: 100%;
  height: 100%;
  flex-flow: row wrap;
  align-content: flex-start;
}

.content {
  width: 100%;
  height: 100%;
  padding: 30px;
  padding-top: 10px;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

p {
  font-size: 15px;
  font-weight: bold;
  margin: 0px;
  flex: 0 0 75%;
  white-space: pre-wrap;
}

.p2,
.p3 {
  flex: 0 0 69.7%;
}

.headImg {
  padding: 10px;
}

.url1 {
  flex: 0 0 23%;
  width: 200px;
  height: 200px;
  margin-left: 15px;
  margin-top: -20px;
  border-radius: 5px;
}

img {
  transition: all 0.6s;
}

img:hover {
  transform: scale(1.2);
}

.el-button-group .el-button--primary:last-child {
  border-left-color: #e11057;
}

.el-button--primary.is-plain {
  color: #e11057;
  background-color: #fef6e7;
  border: 1px solid #e11057;
}

.el-button--primary.is-plain {
  color: #e11057;
  background-color: #fef6e7;
  border: 1px solid #e11057;
}

.el-button--primary.is-plain:focus {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}

.el-button--primary.is-plain:hover {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}

.revert {
  text-align: center;
}

.revertbtn {
  flex: 1;
  width: 140px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #e11057;
  transition: all 0.5s;
  background-color: #fef6e7;
  border: 1px solid #e11057;
}

.revertbtn:hover {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}

.revertbtn:focus {
  transition: all 0.5s;
  background-color: #e11057;
  border: 1px solid #e11057;
}
</style>